<template>
  <view>
    <view class="goods_box" @click="routeTo(item)" v-for="(item, index) in itemList" :key="index">
      <view class="dis-flex flex-y-center">
        <view class="store-image">
          <view style="border: 1rpx solid #f3f4f6; border-radius: 10rpx">
            <u-image
              :src="item.logo"
              mode=""
              width="180rpx"
              height="180rpx"
              border-radius="10"
            ></u-image>
          </view>
          <view class="store-label" v-if="Boolean(item.new)">新店</view>
        </view>
        <view style="padding-left: 20rpx; flex: 1">
          <view class="goods_title oneline-hide">
            {{ item.name }}
          </view>
          <view style="width: 100%; margin: 8rpx 0" class="dis-flex flex-x-center flex-y-between">
            <view class="star dis-flex flex-y-center">
              <u-image
                style="margin-bottom: 4rpx"
                src="@/static/1.png"
                width="28rpx"
                height="28rpx"
              ></u-image>
              <text class="goods-star">{{ item.scoreLevel }}分</text>
            </view>
            <view class="sale-item" v-if="item.categoryCode == 'food'">
              <text>月销{{ item.salesCountPerMonth }}</text>
            </view>
            <view class="sale-item" v-if="item.deliveryMinute">
              <text>{{ item.deliveryMinute }}分钟 </text>
            </view>
            <view class="sale-item" v-if="item.distance">
              <text>{{ item.distanceFormat || item.distance + 'm' }}</text>
            </view>
          </view>
          <view
            style="width: 100%; margin-bottom: 10rpx"
            class="dis-flex flex-y-center"
            v-if="item.deliveryMinPrice"
          >
            <view class="sale-item" style="margin-right: 50rpx">
              <text>起送价¥ {{ (item.deliveryMinPrice * 0.01).toFixed(2) }}</text>
            </view>
            <view class="sale-item" v-if="item.avgConsumePrice">
              <text>人均¥ {{ (item.avgConsumePrice * 0.01).toFixed(2) }}</text>
            </view>
          </view>

          <view class="dis-flex" style="flex-wrap: wrap; overflow: hidden; height: 38rpx">
            <view class="goods_tip" v-for="(conpon, t) in item.coupons" :key="t">
              {{ conpon.name }}
            </view>
          </view>
        </view>
      </view>
      <view class="laba dis-flex flex-y-center" v-if="item.notice">
        <u-image
          style="margin-right: 10rpx"
          src="@/static/ts.png"
          width="32rpx"
          height="28rpx"
        ></u-image>
        <view>{{ item.notice }}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'store-box',
  props: {
    itemList: {
      type: Array,
      default: []
    }
  },
  data() {
    return {}
  },
  methods: {
    onRemove(res) {
      console.log(res)
    },
    beforeUpload(index, list) {
      console.log(index, list)
    },
    routeTo(item) {
      if (item.categoryCode == 'food') {
        uni.navigateTo({
          url: '/dine/diancan/diancanv2?shopId=' + item.id
        })
      } else if (item.categoryCode == 'housekeeping') {
        uni.navigateTo({
          url:
            '/other/merchant-center/merchant-center-service?id=' +
            item.id +
            '&shop=' +
            JSON.stringify(item.shop)
        })
      } else if (item.categoryCode == 'hotel') {
        uni.navigateTo({
          url:
            '/other/merchant-center/merchant-center-hotel?id=' +
            item.id +
            '&shop=' +
            JSON.stringify(item.shop)
        })
      } else if (item.categoryCode == 'entertainment') {
        uni.navigateTo({
          url:
            '/other/merchant-center/merchant-center-yule?id=' +
            item.id +
            '&shop=' +
            JSON.stringify(item.shop)
        })
      } else if (item.categoryCode == 'mall') {
        uni.navigateTo({
          url: '/shops/store?shopId=' + item.id
        })
      } else if (item.categoryCode == 'groupon') {
        uni.navigateTo({
          url: 'goods/comb-goods/comb-goods?combId=' + item.id
        })
      } else {
        uni.navigateTo({
          url: '/other/merchant-center/merchant-center?id=' + item.id
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.goods_box {
  /* width: 100%; */
  background: #ffffff;
  border-radius: 10rpx;
  padding: 20rpx;
  margin: 0 20rpx;
  margin-bottom: 20rpx;

  .store-image {
    position: relative;
  }

  .store-label {
    position: absolute;
    top: 8rpx;
    right: 8rpx;
    width: 60rpx;
    height: 30rpx;
    background: #ed624f;
    border-radius: 10rpx;
    font-size: 20rpx;
    color: #ffffff;
    text-align: center;
    line-height: 30rpx;
  }

  .goods-star {
    font-size: 30rpx;
    color: #333333;
    margin-left: 8rpx;
  }

  .sale-item {
    font-size: 24rpx;
    color: #666666;
    /* margin-right: 50rpx; */
  }

  .laba {
    font-size: 20rpx;
    color: #999999;
    padding: 30rpx 0 10rpx 0;
  }
}

.goods_title {
  font-size: 30rpx;
  color: #333333;
}

.goods_tip {
  /* width: 110rpx; */
  /* height: 40rpx; */
  border-radius: 20rpx;
  border: 1px solid #fa453c;
  /* line-height: 40rpx; */
  text-align: center;
  font-size: 20rpx;
  color: #fa453c;
  margin-right: 20rpx;
  margin-bottom: 20rpx;
  padding: 2rpx 20rpx;
}

.goods_tip:last-child {
  margin-right: 0;
}
</style>
